<template>
  <div class="container">
    <el-card>
    <!-- 头部输入框 -->
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="学科名称">
        <el-input v-model="params.subjectName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="" @click="params.subjectName = ''">清除</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
      <el-button style="float: right" type="success" @click="btn"
        >添加学科</el-button
      >
    </el-form>
    <el-alert
      :title="cTitle"
      type="info"
      show-icon
      :closable="false"
      style="margin-bottom: 10px"
    >
    </el-alert
    >
    <!-- <table>表格</table> -->
    <!-- <Subjects ref="sub" @bianji="xiugai"></Subjects> -->
    <el-table :data="tableData" style="width: 100%" header-align="center">
      <el-table-column
        align="center"
        type="index"
        label="序号"
        width="50"
      ></el-table-column>
      <el-table-column
        align="center"
        label="学科名称"
        width="100"
        prop="subjectName"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="创建者"
        width="100"
        prop="username"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="创建日期"
        width="160"
        prop="addDate"
      >
        <template slot-scope="scope">
          {{ scope.row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="前台是否显示"
        width="130"
        :formatter="aaa"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="二级目录"
        width="80"
        prop="twoLevelDirectory"
      >
      </el-table-column>
      <el-table-column align="center" label="标签" width="130" prop="tags">
      </el-table-column>
      <el-table-column align="center" label="题目数量" width="80" prop="totals">
      </el-table-column>
      <el-table-column align="center" label="操作" >
        <template slot-scope="scope">
          <el-button class="box" type="text" size="small" @click="$router.push(`/subjects/directorys?id= ${scope.row.id}&name=${scope.row.subjectName}`)">学科分类</el-button>
          <el-button class="box" type="text" size="small" @click="$router.push(`/subjects/tags?id=${scope.row.id}&name=${scope.row.subjectName}`)">学科标签</el-button>
          <el-button class="box" type="text" size="small" @click="hbcc(scope.row)"
            >修改</el-button
          >
          <el-button class="box" type="text" size="small" @click="hacc(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <el-pagination
        background
         layout=" sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pagesize"
        :total="counts"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </el-row>
    <!-- //弹出层 -->
    <el-dialog
      :title="isEdit ? '修改' : '新增'"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="qing"
      v-if="dialogVisible"
    >
        <!-- 输入框 -->
      <el-form ref="formData" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="form.subjectName"></el-input>
        </el-form-item>
        <!-- 滑动开关 -->
        <el-switch
        class="asd"
          v-model="form.isFrontDisplay"
          :active-value="1"
          :inactive-value="0"
          inactive-text="是否显示"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
        <el-form-item class="zzx">
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="quxiao">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
// import Subjects from '../components/subjects-add'
import {
  add as tianjiaAdd,
  list,
  remove,
  update
} from '../../api/hmmm/subjects'
export default {
  data () {
    return {

      isEdit: false, // 是否是修改
      dialogVisible: false, // 弹框是否显示
      form: { // 弹层表单
        subjectName: '', // 学科名称
        isFrontDisplay: '1'// 是否显示
      },
      tableData: [], // 学科列表
      params: {
        page: 1, // 第一页
        pagesize: 10, // 每页几条数据
        subjectName: ''// 搜索框
      },
      counts: 0, // 总条数
      rules: {
        subjectName: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '学科名为1~10位', trigger: ['blur', 'change'] }

        ]
      }
    }
  },
  // components: {
  //   Subjects
  // },
  created () {
    this.loadRoles()
  },
  computed: {
    cTitle () {
      return '数据一共' + this.counts + '条'
    }
  },
  methods: {

    // s搜索
    search () {
      console.log(this.params.subjectName)
      this.loadRoles()
    },
    // 修改接口
    async doEdit () {
      try {
        const rs = await update(this.form)
        console.log('修改之后的结果', rs)
        // 1. 重新加载数据
        this.loadRoles()
        // 2. 提示一下
        this.$message.success('操作成功')
        // 3. 关闭弹层
        this.dialogVisible = false
      } catch (err) {
        // console.log(err.message)
        this.$message.error(err.message)
      }
      this.quxiao()
    },
    // 修改
    hbcc (row) {
      // 显示弹框
      this.dialogVisible = true
      // 数据回填
      this.form = {
        id: row.id,
        subjectName: row.subjectName,
        isFrontDisplay: row.isFrontDisplay
      }
      // this.value = this.form.isFrontDisplay
      console.log(this.value)
      this.isEdit = true
    },
    // 删除
    async doDel (id) {
      try {
        const rs = await remove({ id: id })
        console.log('删除之后的结果是', rs)
        // 1. 提示
        this.$message.success('删除成功')
        // 删除成功后进行一个判断
        if (this.tableData.length - 1 === 0 || this.params.page === 0) {
          this.params.page--
          this.params.page = 1
        }
        // 2. 重新加载数据
        this.loadRoles()
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 用户点击了删除
    hacc (id) {
      this.$confirm('你确定要删除吗')
        .then(() => {
          this.doDel(id)
        })
        .catch(() => {})
    },
    // 获取数据
    async loadRoles () {
      const res = await list(this.params)
      console.log('xueke', res)
      this.tableData = res.data.items
      // 获取数据数量
      this.counts = res.data.counts
      // console.log('111', this.counts)
    },
    // 新增方法
    async doAdd () {
      try {
        const res = await tianjiaAdd(this.form)
        console.log('123', res)
        this.$message.success('添加成功')
        // 通知父级关闭弹窗
        this.dialogVisible = false
        this.form = {
          subjectName: '',
          isFrontDisplay: 1
        }
        // 通知子级更新数据
        this.loadRoles()
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 兜底验证
    onSubmit () {
      this.$refs.formData.validate((value) => {
        // 判断是新增还是修改
        if (value) {
          this.isEdit ? this.doEdit() : this.doAdd()
        }
      })
    },
    // 分页
    handleCurrentChange (curPage) {
      // 1. 更新查询条件中页码
      this.params.page = curPage
      // 2. 重新发一次请求
      this.loadRoles()
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      // 拿到每页条数
      this.params.pagesize = val
      // 重新请求数据
      this.loadRoles()
    },
    // 点击新增
    btn () {
      this.dialogVisible = true
      this.isEdit = false
    },
    // 点击取消
    quxiao () {
      this.dialogVisible = false
      this.qing()
    },
    qing () {
      this.form = {
        subjectName: '',
        isFrontDisplay: 1
      }
      this.$refs.formData.clearValidate()
    },

    // 是否显示
    aaa (row) {
      if (row.isFrontDisplay === 1) {
        return '是'
      } else {
        return '否'
      }
    }
  }
}
</script>

<style scoped less="scss">

.zzx {
  margin-top: 30px;
}
::v-deep .box {
  font-size: 14px;
}
.asd{
  margin-left: 10px;
}
</style>
